<template>
  <div ref="userAvatar" class="user-avatar-menu-box flex-col-start" @mouseenter="showMenu" @mouseleave="showMenu">
    <el-avatar :src="user.avatar" class="user-avatar"></el-avatar>

    <!--    弹出层-->
    <div v-show="show" class="flex-col-end menu-box">
      <div class="user-avatar-menu-body flex-col">
        <div class="user-avatar-menu-header flex-col-center">🐼{{ user.userNick }}</div>
        <div class="user-avatar-menu-among flex-row-around">
          <!--          此处用于一些展示: 收藏数量、积分大小...-->
          <div class="user-avatar-menu-among-item flex-col-center ">
            <span>10</span>
            <span>收藏</span>
          </div>

          <div class="user-avatar-menu-among-item flex-col-center">
            <span>10</span>
            <span>文章</span>
          </div>
        </div>
        <!--        登录注册-->
        <div class="user-avatar-menu-item flex-col-center" >
          <router-link to="/login">登录/注册</router-link>
        </div>
        <!--        个人中心-->
        <div class="user-avatar-menu-item flex-col-center" >
          <router-link to="/bg">个人中心</router-link>
        </div>
        <!--        退出登录-->
        <div class="user-avatar-menu-item flex-col-center" >
          退出登录
        </div>
      </div>
    </div>
    <!--    <div  class="flex-col-end" :style="{left: position.left+'px',bottom: position.bottom+'px',width:menu.width+'px',height: menu.height+'px',position:'absolute'}" v-show="show">-->
    <!--      <div class="user-avatar-menu-body flex-col">-->
    <!--        <div class="user-avatar-menu-header flex-col-center">🐼{{user.name}}</div>-->
    <!--        <div class="user-avatar-menu-among flex-row-around">-->
    <!--&lt;!&ndash;          此处用于一些展示: 收藏数量、积分大小...&ndash;&gt;-->
    <!--          <div class="user-avatar-menu-among-item flex-col-center " >-->
    <!--            <span>10</span>-->
    <!--            <span>收藏</span>-->
    <!--          </div>-->

    <!--          <div class="user-avatar-menu-among-item flex-col-center">-->
    <!--            <span>10</span>-->
    <!--            <span>文章</span>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        &lt;!&ndash;        登录注册&ndash;&gt;-->
    <!--        <div class="user-avatar-menu-item flex-col-center" >-->
    <!--          <router-link to="/login">登录/注册</router-link>-->
    <!--        </div>-->
    <!--&lt;!&ndash;        个人中心&ndash;&gt;-->
    <!--        <div class="user-avatar-menu-item flex-col-center" >-->
    <!--          个人中心-->
    <!--        </div>-->
    <!--&lt;!&ndash;        退出登录&ndash;&gt;-->
    <!--        <div class="user-avatar-menu-item flex-col-center" >-->
    <!--          退出登录-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import {userApi} from "@/api/user/user";

export default {
  name: "UserAvatarMenu",
  props: {
    width: {
      type: String,

    },
    value: {
      type: Object,
    }
  },
  data(){
    return{
      show:false,
      user: {
        avatar: require("@/assets/img/header/defaultAvatar.webp")

      }

    }
  },
  methods: {
    showMenu() {
      this.show = !this.show
    },
    initUser() {
      userApi.getUserInfo().then(resp => {
        if (resp.code === 200) {
          this.$store.commit("userOption/setUser", resp.data)
          this.user = resp.data // 或者this.$store.state.user
        }
      })
    }
  },
  created() {
    this.initUser()
  }
}
</script>

<style scoped lang="less">
  .user-avatar-menu-box {
    position: relative;
    border: 2px solid white;
    border-radius: 50%;
    margin: 0 5px;
    background-color: salmon;

    .user-avatar {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: rotate(360deg);
      }

    }

    .menu-box {
      position: absolute;
      padding-top: 30px;
      width: 150px;
      min-height: 200px;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 95%);
      z-index: 9999;
    }

    .user-avatar-menu-body {
      position: relative;
      width: 100%;
      height: 85%;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      z-index: 999;
      padding-bottom: 20px;

      .user-avatar-menu-header {

        min-height: 50px;
        padding: 10px;
        font-size: 20px;
        font-weight: 600;


        white-space: break-spaces;
        word-break: break-word;
      }
      .user-avatar-menu-among{
        height: 50px;
        .user-avatar-menu-among-item{

          span:first-child{
            font-weight: 600;
            color: tomato;
          }
          span:last-child{
            font-size: 8px;
            color: grey;
          }
        }

      }
      .user-avatar-menu-item{
        width: 100%;
        height: 30px;
        cursor: pointer;
        background-color: #f6f6f6;
        transition: all 0.3s;
        &:hover{
          background-color: #d7d6d6;
        }
        a{
          text-decoration: none;
          color: black;
        }
      }

      &:before {
        width: 10px;
        height: 10px;
        content: " ";
        left: 50%;
        top: 0;
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: white;
        z-index: -999;
        border-radius: 2px;
      }

    }


  }
</style>